import React, { Component } from 'react';

class Child extends Component {
    title = ''

    arr = ['张三', '李四', '王五', '赵六，']

    inputFn = evt => {
        this.title = evt.target.value
        this.forceUpdate()
        console.log(this.title)
    }
    enterFn = evt => {
        if (evt.keyCode === 13) {
            if (evt.target.value !== '') {
                this.title = evt.target.value
                this.arr.push(this.title)
                evt.target.value = ''
                this.forceUpdate()
            }
            console.log(this.arr)
        }
    }
    delFun = ev => {
        console.log(this.arr.indexOf(ev.target.getAttribute('item')))
        this.arr = this.arr.splice(this.arr.indexOf(ev.target.getAttribute('item')), 1)
        this.forceUpdate()
        console.log(ev)
    }
    render() {
        return (
            <div>
                <div>
                    姓名：
                    <input type="text"
                        onInput={this.inputFn}
                        onKeyUp={this.enterFn}
                    />
                </div>
                <br />
                <table>
                    <thead>
                        <tr>
                            <th>姓名：</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            this.arr.map((item, index) => (
                                <tr key={item}>
                                    <td>{item}</td>
                                    <td><button onClick={this.delFun} item={item}>删除</button></td>
                                </tr>
                            ))
                        }
                    </tbody>
                </table>
            </div>
        );
    }
}

export default Child;
